<template>
  <div>
    <van-nav-bar
      title="商品详情"
      left-text="返回"
      left-arrow
      @click-left="$goBack"
    />
    <img :src="goodsCoverImg"/>
    <h3 style="margin-left: 12px; margin-bottom: 28px;">{{goodsName}}</h3>

    <div class="shop-type" style="margin-left: 12px;">免邮费 顺丰快递</div>
    <div class="price">¥{{sellingPrice}}</div>

    <van-goods-action>
      <van-goods-action-button
        color="#6bd8d8"
        type="warning"                            
        text="加入购物车" 
        @click="addshopcar"
      />
      <van-goods-action-button color="#0dc3c3" type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import Shopitem from './shopitem.vue';

export default {
  methods:{
    addshopcar(){
      //将当前商品数据存入缓存
      //detailData

      //存之前先获取购物车数据，再将详情数据push金购物车数据
      let arr=localStorage.getItem("shopCarData") ? JSON.parse(localStorage.getItem("shopCarData")) :[]
      this.detailData.goodsId=this.goodsId
      this.detailData.goodsName=this.goodsName
      this.detailData.goodsCoverImg=this.goodsCoverImg
      this.detailData.sellingPrice=this.sellingPrice
      this.detailData.num=1
      this.detailData.checked=true
      let newArr=[...arr,this.detailData] //...扩展运算符

      localStorage.setItem("shopCarData",JSON.stringify(newArr))
      this.$router.push("/shopcar");
    }
  },
  created(){
    this.$axios.get("http://localhost:8888/category").then(res=>{
            console.log(res.data.data,'商品分类数据')
            this.allData = res.data.data;
        }),
        this.detailData=this.$route.params
  },
  data(){
    return{
      allData:[],
      activeKey: 0,
      thirdLevelItems: [],
      
    }
  },
  computed:{

        // 使用计算属性来访问查询参数，这样当查询参数变化时，视图也会自动更新
        goodsId() {
            return this.$route.query.goodsId;
        },
        goodsName() {
            return this.$route.query.goodsName;
        },
        goodsCoverImg() {
            return this.$route.query.goodsCoverImg;
        },
        sellingPrice() {
            return this.$route.query. sellingPrice;
        }

  }
};
</script>

<style>
img {
  display: block;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  margin-bottom:40px;
}
.shop-type {
  color: #b0b0b0;
}
.price {
  margin-left: 12px;
  margin-top: 16px;
  font-size: 24px;
  color: red;
}
.butleft {
  border-radius: 20px 0 0 20px;
}
.butright {
  border-radius: 0 20px 20px 0;
}
</style>